<template>
  <div class="tabs">
    <div class="tabs-div">
      <i class="el-icon-d-arrow-left" @click="leftChange"></i>
      <el-tabs v-model="tabName" type="card" closable @tab-remove="removeTab" @tab-click="tabClick">
        <el-tab-pane v-for="item in tabsList" :key="item.name" :name="item.name">
          <span slot="label"><i :class="item.iconfont" v-if="item.iconfont" style="font-size: 16px;"></i> {{ item.title }}</span>
        </el-tab-pane>
      </el-tabs>
      <i class="el-icon-d-arrow-right" @click="rightChange"></i>
    </div>
    <div class="dropdown-div">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          页面操作<i class="el-icon-caret-bottom el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown" class="tabs-menu-popper">
          <el-dropdown-item command="1">刷新当前页</el-dropdown-item>
          <el-dropdown-item command="2">关闭当前页</el-dropdown-item>
          <el-dropdown-item command="3">关闭其他页</el-dropdown-item>
          <el-dropdown-item command="4">关闭所有页</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "headerNav",
  data() {
    return {
      user: {}
    };
  },
  computed: {
    ...mapState(["tabsList", "nowTab"]),
    tabName: {
      get(){
        return this.nowTab;
      },
      set(){}
    },
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.user = JSON.parse(localStorage.getItem("userdata"));
  },
  mounted() {
    if (this.tabsList.length == 0) {
      this.$store.commit("addTabs", {
        name: this.$route.name,
        path: this.$route.path,
        title: this.$route.meta.title,
        query: {},
        params: {},
        iconfont: this.$route.meta.icon
      });
      this.$store.commit("set_nowTab", this.$route.name);
    }else{
      let item = this.tabsList.filter((l) => l.name == this.nowTab);
      this.$store.commit("delAllTabs", item[0]);
    }
  },
  methods: {
    tabClick(tab) {
      console.log(tab)
      this.$router.push({
        name: tab.name,
      });
    },
    leftChange() {
      this.tabsList.forEach((l,idx) => {
        if(l.name == this.nowTab && idx != 0){
          let item = this.tabsList[idx-1]
          this.$router.push({
            name: item.name,
          });
        }
      })
    },
    rightChange() {
      this.tabsList.forEach((l,idx) => {
        if(l.name == this.nowTab && idx != this.tabsList.length - 1){
          let item = this.tabsList[idx+1]
          this.$router.push({
            name: item.name,
          });
        }
      })
    },
    removeTab(name) {
      if (this.tabsList.length == 1 && name == "consult-fee") return;
      this.$store.commit("delTab", name);
      if (this.tabsList.length == 0) {
        this.$router.push({
          name: "consult-fee",
        });
        this.$store.commit("set_nowTab", name);
      } else if (this.$route.name == name) {
        this.$router.push({
          name: this.tabsList[this.tabsList.length - 1].name,
        });
        this.$store.commit(
          "set_nowTab",
          this.tabsList[this.tabsList.length - 1].name
        );
      }
    },
    handleCommand(type) {
      if (type == 1) {
        this.$router.push({
          name: "reload-page",
          params: { name: this.nowTab },
        });
      } else if (type == 2) {
        this.removeTab(this.nowTab);
      } else if (type == 3) {
        let item = this.tabsList.filter((l) => l.name == this.nowTab);
        this.$store.commit("delAllTabs", item[0]);
      } else if (type == 4) {
        this.$store.commit("delAllTabs");
        this.$router.push({
          name: "consult-fee",
        });
      }
    },
  },
  watch: {
    $route(to, from) {
      console.log(to, from);
      this.$store.commit("set_nowTab", to.name);
      this.$store.commit("addTabs", {
        name: to.name,
        path: to.path,
        title: to.meta.title,
        query: to.query,
        params: to.params,
        iconfont: this.$route.meta.icon
      });
    },
  },
};
</script>
<style scoped lang="less">
.tabs {
  height: 40px;
  overflow: hidden;
  border-bottom: 1px solid #e4e7ed;
  background-color: #fff;
  position: relative;
  .el-icon-d-arrow-left{
    position: absolute;
    left: 0;
    top: 0;
    height: 40px;
    width: 20px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    font-size: 16px;
    z-index: 99;
    background: #fff;
    &:before{
      content: "\e792"
    }
  }
  .el-icon-d-arrow-right{
    position: absolute;
    top: 0;
    right: 100px;
    height: 40px;
    width: 20px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    font-size: 16px;
    z-index: 99;
    border-right: 1px solid #E4E7ED;
    background: #fff;
    &:before{
      content: '\e791'
    }
  }
  .tabs-div {
    width: 100%;
    display: inline-block;
  }

  .dropdown-div {
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
<style lang="less">
.tabs-menu-popper {
  .el-dropdown-menu__item:not(.is-disabled):hover {
    color: #026bad;
    background: #e0ebf2;
  }
}
.tabs {
  .el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover{
    padding-left: 20px;
    padding-right: 20px;
  }
  .el-tabs.el-tabs--card>.el-tabs__header .el-tabs__item .el-icon-close{
    width: 14px;
  }
  .el-tabs__nav-prev,.el-tabs__nav-next{
    width: 20px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: #2c3e50;
    background: #fff;
    font-size: 14px;
  }
  .el-tabs__nav-wrap.is-top{
    margin: 0 20px;
    margin-right: 100px;
  }
  .el-tabs__nav-wrap.is-scrollable.is-top{
    margin: 0;
  }
}
</style>
